import React, { useEffect, useState } from 'react'
import Collist from './Collist';
import Flowers from './Flowers';

const App = () => {
	const [plants,setPlants] = useState([]);
	useEffect(()=>{
		fetch('https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants')
			.then(res=>res.json())
			.then(res=>{
				res.result.plantList.filter(item=>{
					item.isCollect=false;
					return item
				})
				setPlants(res.result.plantList)
			})
	},[])
	const collection = (id,flag)=>{
		if(flag){
			alert('您已收藏')
		}else{
			setPlants(plants.filter(item=>{
				if(item.plantID===id){
					item.isCollect=true
				}
				return item
			}))
		}
	}
	const cancelCollection = (id)=>{
		setPlants(plants.filter(item=>{
			if(item.plantID===id){
				item.isCollect=false
			}
			return item
		}))
	}
	return (
		<div className='list'>
			<div className='head'>
				<h1>收藏列表</h1>
				<Collist cancelCollection={cancelCollection} plants={plants}/>
			</div>
			<div>
				<h1>鲜花列表</h1>
				<Flowers collection={collection} plants={plants} />
			</div>
		</div>
	)
}

export default App;